<template>
  <el-upload
    ref="daoru"
    :action="Upload.url"
    :headers="Upload.headers"
    :limit="limit"
    :on-exceed="handleExceed"
    :on-success="handlePictureSuccessPic"
    :before-upload="beforeAvatarUpload"
    :file-list="fileLi"
    :on-change="changeFile1"
  >
    <el-button size="mini" plain icon="el-icon-upload">{{ btnName }}</el-button>

    <!-- <i class="el-icon-plus"></i> -->
  </el-upload>
  <!-- <el-button size="mini" plain icon="el-icon-upload" @click="daoru"
          >导入成本</el-button
        > -->
</template>
<script>
//--------导入token
import { getToken } from "@/utils/auth";
export default {
  name: "BiOrderAftersales",
  props: {
    uploadUrl: {
      type: String,
      default: null,
    },
    btnName: {
      type: String,
      default: "批量导入",
    },
  },
  data() {
    return {
      fileLi: [],
      dialogVisible: false,
      limit: 2,
      Upload: {
        // 设置上传的请求头部
        headers: {
          header: { responseType: "blob" },

          Authorization: "Bearer " + getToken(),
        },
        // 图片上传的方法地址:
        url: process.env.VUE_APP_BASE_API + "",
      },
    };
  },
  watch: {
    uploadUrl: {
      handler: function (newnew, oldold) {
        this.Upload.url = process.env.VUE_APP_BASE_API + this.uploadUrl;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    //图片上传前的相关判断
    beforeAvatarUpload(file) {
      // const isJPG = file.type == 'image/jpeg' || file.type == 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 100;
      // if (!isJPG) {
      //     this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      // }
      if (!isLt2M) {
        this.$message.error("上传导入文件大小不能超过 100MB!");
      }
      this.openUploadLoading();
      return isLt2M;
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.picUrl = file.url;
      this.imageUrl = file.url;
      // this.dialogVisible = true;
    },
    //部门文件导入修改打开
    daoru() {
      this.dialogVisible = true;
    },
    // 打开加载层
    openUploadLoading() {
      this.$modal.loading("正在导入，请稍候！");
    },
    //文件导入成功回传

    handlePictureSuccessPic(response, file) {
      this.$refs.daoru.clearFiles(); //去掉文件列表
      this.$modal.closeLoading();
      console.log(JSON.stringify(file));
      console.log(JSON.stringify(response));
      // this.dialogVisible = true;
      // this.dialogVisibleList = response;
      // if (response.code == 200) {

      this.$modal.msgSuccess("导入成功");
      this.$emit("handleSuccess");
      //   this.getList();
      // }

      // this.openmsg = true;
      // this.msg = response.msg;

      //设置图片访问路径 （url 后台传过来的的上传地址）
      // this.picUrl = file.response.url;
      // const url = file.response.fileName;
      // this.file = file.response.url;
      // console.log(JSON.stringify(this.file));
      // if (res.code == 200) {

      //   this.dialogVisible = false

      //   if (res.msg == '操作成功') {

      //     this.$modal.msgSuccess('导入成功')
      //   } else {
      //     this.$modal.msgError(res.msg);
      //   }
      //   this.getList();
      //   // return true
      // } else {
      //   this.$modal.msgError(res.msg);
      //   this.dialogVisible = true
      //   // this.$message.msgError('该颜色未在字典定义')
      //   return
      // }
    },

    // 文件个数超出
    handleExceed() {
      this.$modal.msgError(`上传链接文件数量不能超过 ${this.limit} 个!`);
    },
    // 上传文件让第二次覆盖第一的文件
    changeFile1(file, fileList) {
      if (fileList.length > 1) {
        this.fileLi = fileList.slice(-1);

        // this.fileList = [fileList[fileList.length - 1]]//这一步，是 展示最后一次选择文件
      }
      // this.fileSpecial = fileList;
    },
  },
};
</script>